// 定义一个自定义Hook,封装Cat和Mouse中公共的状态和逻辑
import { useState, useEffect } from 'react'
export default function usePosition() {
  const [x, setX] = useState(0)
  const [y, setY] = useState(0)

  // 定义鼠标移动的事件处理函数
  const handle = (e) => {
    setX(e.clientX)
    setY(e.clientY)
  }

  useEffect(() => {
    //注册事件.监听鼠标在可视区的移动的坐标
    window.addEventListener('mousemove', handle)
    return () => {
      window.removeEventListener('mousemove', handle)
    }
  }, [])

  return { x, y }
}
